<template>
  <div>
    <el-select v-model="scale" @change="change" class="w-[100px]">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
    </el-select>
  </div>
</template>

<script setup lang="ts">
import useConfigStore from '@/states/useConfigStore'
import { useRoute } from 'vue-router'

const scale = defineModel()
const options = [
  {
    label: '25%',
    value: 0.25,
  },
  {
    label: '50%',
    value: 0.5,
  },
  {
    label: '100%',
    value: 1,
  },
]

const configStore = useConfigStore()
const route = useRoute()

function change() {
  configStore.getConfig(+route.params.id)
}
</script>

<style></style>
